import { accountCheck } from '@/services/login/login';
import { LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Card, message } from 'antd';
import { Link, history } from 'umi';
import styles from './index.less';

export default function Page() {
  // 服务商账户登陆
  const doLogin = async (values: Login.CheckAccount) => {
    const res = await accountCheck(values)
    if(res.code === 200){
      if(res.data.web_code){
        // 跳转到服务商选择页面
        const {web_code} = res.data
        history.push(`/user/choose/service?web_code=${web_code}`)
      }else{
        message.info(res.message)
      }
    }else{
      message.info(res.message)
    }
  }
  return (
    <div className={styles.container}>
      <div className={styles.login}>
        <Card
          title="试品客粉丝管理系统"
          headStyle={{ textAlign: "center" }}
          style={{ width: 400, padding: 20, borderRadius: 5, background: "white" }}
        >
          <ProForm
            onFinish={doLogin}
            submitter={{
              searchConfig: { submitText: "登 陆" },
              resetButtonProps: { hidden: true },
              render: (_, dom) => dom.pop(),
              submitButtonProps: { size: "large", style: { width: "100%" } }
            }}
          >
            <ProForm.Item>
              <ProFormText
                name="username"
                placeholder="手机号"
                initialValue="17784891765"
                fieldProps={{ size: "large", prefix: <MobileOutlined /> }}
                rules={[
                  { required: true, message: "请输入用户名" }
                ]}
              ></ProFormText>
            </ProForm.Item>
            <ProForm.Item>
              <ProFormText.Password
                name="password"
                placeholder="登陆密码"
                initialValue="123456"
                fieldProps={{ size: "large", prefix: <LockOutlined /> }}
                rules={[
                  { required: true, message: "登陆密码" }
                ]}
              ></ProFormText.Password>
            </ProForm.Item>
          </ProForm>
          <div className={styles.footer}>
            <div className={styles.left}>
              <span>其他登陆方式</span>
              <div><Link to="/user/wechat/login"><WechatOutlined className={styles.icon} /></Link></div>
            </div>
            <div className={styles.right}>
              <Link to="/user/wechat/register">服务商注册</Link>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}
